<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">

        <title>Uniter interactive demo</title>

        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
        <link rel="stylesheet" href="../styles/base.css">

        <style type="text/css">
            .contain-floats::after {
                display: block;
                content: " ";
                clear: left;
            }

            .panes {
                margin-left: -30%;
                margin-right: -30%;
            }

            .panes section {
                float: left;
                width: 33%;
                height: 30em;
            }

            .code-editor,
            .result {
                display: block;
                margin-right: 1em;
                height: 100%;
            }

            .result {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <article>
            <heading>
                <ul class="nav nav-pills pull-right">
                    <li><a href="..">Home</a></li>
                    <li class="active"><a href="">Demo</a></li>
                </ul>
                <h1 class="text-muted">Uniter</h1>
            </heading>

            <p>NB: Uniter is in alpha stage, and currently only supports a small subset of PHP's features.</p>

            <div class="panes contain-floats">
                <section>
                    <heading>
                        <h1>JavaScript</h1>
                    </heading>

                    <div class="code-editor" id="javascriptEditor"></div>
                </section>

                <section>
                    <heading>
                        <h1>PHP</h1>
                    </heading>

                    <div class="code-editor" id="phpEditor"></div>
                </section>

                <section>
                    <heading>
                        <h1>Result</h1>
                    </heading>

                    <iframe class="result" id="result"></iframe>
                </section>
            </div>
        </article>

        <a href="https://github.com/asmblah/uniter">
            <img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png" alt="Fork me on GitHub">
        </a>

        <script src="../dist/uniter.js"></script>
        <script src="../dist/demo/interactive.js"></script>

        <script src="//code.jquery.com/jquery.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    </body>
</html>
